<template>
	<view class="page index">
		<view class="header">
			<common-search v-model="keyWord" @input="input" @filter="openFilter"></common-search>
		</view>
		<view class="main">
			<empty v-if="empty" :desc="desc"></empty>
			<scroll-view v-else class="scroll" scroll-y="true" :show-scrollbar="false" :enhanced="true" @scrolltolower="scrollLower">
				<view class="task-list">
					<view class="task-item" v-for="item in taskList" :key="item.id" @click="toDetails(item.id)">
						<view class="header">
							<view class="left">
								{{item.name}}
							</view>
							<view class="right" :style="{color: `${item.color}`, borderColor: `${item.color}`}">
								{{item.statusText}}
							</view>
						</view>
						<view class="details">
							<view class="det-item">
								<view class="tag">
									任务负责人
								</view>
								<view class="value">
									{{item.ownerUserName}}
								</view>
							</view>
							<view class="det-item">
								<view class="tag">
									任务优先级
								</view>
								<view class="value">
									{{item.priorityText}}
								</view>
							</view>
							<view class="det-item">
								<view class="tag">
									任务截止日期
								</view>
								<view class="value">
									{{$share.getDate(item.deadLine)}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="create" @click="createTask">
				新建
			</view>
		</view>
		<uni-popup ref="filterPopup" type="top" background-color="#fff">
			<view class="filter">
				<!-- <view class="filter-container team">
					<view class="title">
						任务团队
					</view>
					<view class="filter-list">
						<view :class="['item', teamIndex == index && 'select']" v-for="(item, index) in teamList" :key="index" @click="teamIndex = index">
							{{item}}
						</view>
					</view>
				</view> -->
				<view class="filter-container status">
					<view class="title">
						任务状态
					</view>
					<view class="filter-list">
						<view :class="['item', statusIndex == index && 'select']" v-for="(item, index) in statusList" :key="index" @click="statusIndex = index">
							{{item}}
						</view>
					</view>
				</view>
				<view class="filter-container time">
					<view class="title">
						任务下发时间
					</view>
					<!-- <view class="filter-list">
						<view :class="['item', timeIndex == index && 'select']" v-for="(item, index) in timeList" :key="index" @click="changeTimeIndex(index)">
							{{item}}
						</view>
					</view> -->
					<view class="select-time">
						<uni-datetime-picker v-model="timeRange" type="daterange" :end="Date.now()" rangeSeparator="至" @change="changeTime" />
					</view>
				</view>
				<view class="footer">
					<button class="cencle" @click="cencle">清空</button>
					<button class="confire" @click="confire">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonSearch from "@/components/commonSearch.vue";
	import empty from "@/components/empty.vue";
	import {getTaskListApi} from "@/api/task_api.js";
	export default {
		components: {
			commonSearch,
			empty
		},
		data() {
			return {
				empty: false,
				desc: '',
				keyWord: '',
				// teamIndex: -1,
				// teamList: ['我负责的', '下属负责的', '我参与的', '下属参与的'],
				statusIndex: -1,
				statusList: ['进行中', '已完成', '已超期', '作废'],
				// timeIndex: -1,
				// timeList: ['今日', '昨日', '本周', '上周', '本月', '上月', '本季度', '上季度'],
				timeRange:[],
				taskList: [],
				pageNum: 1,
				pageSize: 6,
				totalPage: 1,
			}
		},
		onShow() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			this.pageNum = 1;
			this.taskList = [];
			this.getTaskList();
		},
		methods: {
			//滚动线触底
			scrollLower(){
				if(this.pageNum >= this.totalPage){
					return;
				}
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				this.pageNum++;
				this.getTaskList();
			},
			//关键字
			input(e) {
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				this.pageNum = 1;
				this.taskList = [];
				this.getTaskList();
			},
			// 获取任务列表
			async getTaskList(){
				this.empty = false;
				if(this.keyWord == ''){
					this.desc = '暂无任务';
				}else{
					this.desc = '未搜索到任务'
				}
				let res = await getTaskListApi({
					name: this.keyWord,
					status: this.statusIndex < 0 ? '' : this.statusIndex,
					createTime: this.timeRange.length == 0 ? '' : `${this.timeRange[0]} 00:00:00, ${this.timeRange[1]} 23:00:00`,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				}).catch(() => {
					uni.hideLoading();
					this.empty = true;
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let priorityText = "";
					let statusText = "";
					let color = ""
					switch(item.priority){
						case 0: {
							priorityText = "极高";
							break;
						}
						case 1: {
							priorityText = "高";
							break;
						}
						case 2: {
							priorityText = "中";
							break;
						}
						case 3: {
							priorityText = "低";
							break;
						}
					}
					switch(item.status){
						case 0: {
							statusText = "进行中";
							color = "#3388ff";
							break;
						}
						case 1: {
							statusText = "已完成";
							color = "#3bbf03";
							break;
						}
						case 2: {
							statusText = "已超期";
							color = "#f44444";
							break;
						}
						case 3: {
							statusText = "作废";
							color = "#c9c9c9";
							break;
						}
					}
					return {
						...item,
						priorityText,
						statusText,
						color
					}
				})
				this.taskList = [...this.taskList, ...res.data.list];
				this.totalPage = Math.ceil(res.total / this.pageSize);
				if(res.data.total == 0){
					this.empty = true;
				}
				await uni.hideLoading();
			},
			openFilter() {
				this.$refs.filterPopup.open();
			},
			// 选择时间范围
			changeTime(e){
				// this.timeIndex = -1;
			},
			// 选择时间范围
			// changeTimeIndex(index){
			// 	if(this.timeRange.length != 0){
			// 		this.timeRange = [];
			// 	}
			// 	this.timeIndex = index;
			// },
			// 清空筛选条件
			cencle(){
				this.statusIndex = -1;
				this.timeRange = [];
			},
			confire(){
				this.$refs.filterPopup.close();
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				this.pageNum = 1;
				this.taskList = [];
				this.getTaskList();
			},
			toDetails(id) {
				uni.navigateTo({
					url: `/pages/index/task/details?id=${id}`
				})
			},
			createTask() {
				uni.navigateTo({
					url: '/pages/index/task/createTask'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";

	.index {
		@include flex-c;

		>.header {
			padding: 24rpx 30rpx 10rpx;
			flex: 0 0 auto;
		}

		.main {
			flex: 1 0 0;
			overflow: auto;
			.scroll{
				height: 100%;
				.task-list {
					padding: 14rpx 30rpx 24rpx;
				
					.task-item {
						@include box;
						@include list;
						margin: 0 0 18rpx;
					}
				}
			}
			.create {
				position: fixed;
				bottom: 106rpx;
				right: 30rpx;
				width: 80rpx;
				height: 80rpx;
				background-color: #4095E5;
				@include flex-r-center-center;
				font-size: 24rpx;
				color: #fff;
				border-radius: 50%;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
			}

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.filter {
			@include popup;
			.time{
				.select-time{
					padding: 20rpx 0 0;
				}
			}
		}
		&::-webkit-scrollbar {
			display: none;
		}
	}
	::v-deep .uni-calendar--fixed {
		top: 0;
		bottom: unset;
	}
</style>